<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https:////at.alicdn.com/t/c/font_4755959_1mxov0bn18l.css"
    />
    <link rel="icon" type="image/x-icon" href="../img/logo.jpg" />
    <link rel="stylesheet" href="../style/public.css" />
    <link rel="stylesheet" href="./login.css" />
    <title>登录</title>
  </head>
  <body>
    <header>
      <div class="nav flex aic p-15 bg-base">
        <div class="logo"><img src="../img/logo.jpg" alt="" /></div>
        <div class="title flex jc-c aic fff">
          <h2>登录</h2>
        </div>
        <div class="back flex aic">
          <span>返回</span>
          <i class="iconfont icon-youjiantou f18"></i>
        </div>
      </div>
    </header>
    <main>
      <div class="phone-num flex aic p-15 bg-fff mt-10 bb3">
        <p>用户名:</p>
        <input
          id="username"
          value="张三"
          
          class="phone ml-15 p-10"
          type="text"
          placeholder="请输入用户名"
        />
      </div>
      <div class="phone-num flex aic p-15 bg-fff mt-10 bb3">
        <p>手机号:</p>
        <input
          id="phone"
          value="12345678901"
          maxlength="11"
          class="phone ml-15 p-10"
          type="text"
          placeholder="请输入手机号"
        />
      </div>
      <div class="phone-num flex aic jc-sb p-15 bg-fff bb3">
        <div class="flex aic">
          <p>验证码:</p>
          <input
            id="code"
            maxlength="4"
            class="phone ml-15 p-10"
            type="text"
            placeholder="请输入验证码"
          />
        </div>
        <button id="get-code" class="get-code bg-base fff">
          <span>获取验证码</span>
        </button>
      </div>
    </main>
    <footer>
      <div class="login fixed fcc p-15 bg-fff w100p">
        <button id="login" class="btn fff"><span>点击登录</span></button>
      </div>
    </footer>
    <script src="../js/jquery.js"></script>
    <script src="../js/axios.js"></script>
    <script>
      $(".back").click(function () {
        history.back();
      });
      var loginObj = {
        //绑定事件
        bindEvent() {
          $("#get-code").on("click", function () {
            loginObj.getCode();
          });
          $("#login").on("click", function () {
            loginObj.login();
          });
        },
        getCode() {
          var phone = $("#phone").val();
          if (!phone) {
            alert("请输入手机号");
            return false;
          }
          if (phone.length !== 11) {
            alert("请输入正确的手机号");
            return false;
          }
          var code = "";
          for (i = 0; i < 4; i++) {
            var random = Math.floor(Math.random() * 10);
            code += random;
          }

          //去重用户
          var url = `http://localhost:3000/User?q=${phone}`;
          axios.get(url).then(function (res) {
            if (res.data.length === 0) {
              var url = "http://localhost:3000/User";
              var data = {
                userName:$('#username').val(),
                phone: phone,
                code: code,
              };
              axios.post(url, data).then(function (res) {
              });
            } else {
              var id = res.data[0].id;
              var url = "http://localhost:3000/User/"+id;
              var data = {
                userName:$('#username').val(),
                phone: phone,
                code: code,
              }
              axios.patch(url, data).then(function (res) {
                alert("您手机的验证码是" + code);
                })
            }
           
          });
        },

        // 登录
        login() {
          var phone = $("#phone").val();
          var code = $("#code").val();
          if (!code) {
            alert("请输入验证码");
            return false;
          }
          var url = `http://localhost:3000/User?phone=${phone}&code=${code}`;
          axios
            .get(url)
            .then(function (res) {
              if (res.data.length === 0) {
                alert("手机或验证码错误");
              } else {
                var use = res.data[0];
                localStorage.userId = use.id;
                localStorage.phone = use.phone;
                localStorage.userName = use.userName;
                location.href = "../my/my.html";
                
              }
            })
            .catch(function () {
              alert("登录失败");
            });
        },
      };
      loginObj.bindEvent();
    </script>
  </body>
</html>
